<template>
    <div class="makeFriendsBody">
        <div class="header">
            <div class="header-left">
                系统推荐
            </div>
            <router-link class="header-right" to="/Activity">
                <div>
                    <span>设置</span>
                    <!-- <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;">
                        <use xlink:href="#icon-jiantouarrow594"></use>
                    </svg> -->
                </div>
            </router-link>
        </div>
        <div class="content" ref="scrollerBox">
            <div class="contentBox">
                <scroller 
                    style="relative"
                    :on-refresh="refresh"
                    :on-infinite="infinite"
                    ref="my_scroller">

                        <!-- <div v-for="(item, index) in items" @click="onItemClick(index, item)"
                            class="row" :class="{'grey-bg': index % 2 == 0}">
                            {{ item }}
                        </div> -->

                    <div class="item" 
                        :style="{backgroundImage:'url('+ url +')'}"
                        v-for="(item, index) in items" @click="onItemClick(index, item)"
                    >
                        <div class="item-bottom">
                            <div class="personal-name">啦啦啦啦</div>        
                            <div class="personal-data">
                                <span class="personal-sex">
                                    <svg class="icon" aria-hidden="true" style="width: .42rem;height: .42rem;vertical-align: -0.1rem">
                                        <use xlink:href="#icon-xingbienv"></use>
                                    </svg>
                                </span>
                                <span class="personal-age">90后</span>
                                <span class="personal-couple">单</span>
                                <span class="personal-occupation">本科·经理/互联网信息</span>
                            </div>
                            <div class="personal-address">
                                <svg class="icon" aria-hidden="true" style="width: .42rem;height: .42rem;vertical-align: -0.1rem">
                                    <use xlink:href="#icon-dizhi"></use>
                                </svg>
                                广东省广州市天河区
                            </div>  
                        </div>
                    </div>
                </scroller>

            </div>
            
            
        </div>
    </div>
</template>

<script>
export default {
    name: "makeFriendsBody",
    data () {
        return {
            url: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
            items: []
        }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.items.push(i + ' - keep walking, be 2 with you.')
      }
      this.top = 1
      this.bottom = 20
    },
    methods: {
      refresh(done) {
        setTimeout(() => {
          let start = this.top - 1
          for (let i = start; i > start - 10; i--) {
            this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
          }
          this.top = this.top - 10;
          done()
        }, 1500)

      },
      infinite(done) {
        
        
        setTimeout(() => {
          let start = this.bottom + 1
          for (let i = start; i < start + 10; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
          }
          this.bottom = this.bottom + 10
          done()
        }, 1500)
        // this.$refs.scrollerBox.heihgt = this.$refs.my_scroller.height

        
      },
      onItemClick(index, item) {
        console.log(index)
      }
    }
}
</script>

<style lang="stylus" scoped>
.makeFriendsBody
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .3rem
        border-bottom: 1px solid #ddd
        box-sizing:border-box
        box-shadow: 0 0px 1px rgba(0,0,0,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: red
                margin-right: .2rem
                margin-top: .25rem
        .header-right
            min-width: 1.04rem
            float: right
            text-align: center
            font-size: .26rem
            color: #ccc
    .content
        background-color: #ffffff
        padding: .2rem
        box-sizing: border-box
        height: 100%
        .contentBox
            height: 15rem
            position: relative 
            .item
                height: 7.13rem
                width: 100%
                border-radius: .2rem
                overflow: hidden
                background-repeat: no-repeat
                background-position:center
                background-size: cover
                position: relative
                box-shadow: 0 0 2px 1px #999
                margin-bottom: .2rem
                .item-bottom
                    position: absolute
                    bottom: 0
                    padding: .2rem
                    box-sizing: border-box
                    background-color: rgba(0,0,0,0.5)
                    width: 100%
                    .personal-name
                        font-size: .3rem
                        margin-bottom: .1rem
                        color: #fff
                    .personal-data
                        margin-bottom: .1rem
                        .personal-age
                            height: .4rem
                            line-height: .4rem
                            padding: .05rem .1rem
                            color: #fff
                            background-color: #ffa2d9
                            border-radius: .08rem
                            margin-right: .1rem
                        .personal-couple
                            padding: .04rem
                            background-color: #ff9494
                            border-radius: 50%
                            color: #fff
                            margin-right: .1rem
                        .personal-occupation
                            color: #fff
                    .personal-address
                        color: #bbbbbb



</style>


